Step 1 - Use keyboard keys to navigate between Page nodes
In this step of the tutorial you create keyboard navigation between the Home, Media, Car, and Navigation application screens. You set focus to the toggle buttons on the navigation bar and set the application to navigate between the application screens when the user presses the → (Right Arrow) and ← (Left Arrow) keyboard keys.
Assets for the tutorial
The starting point of this tutorial is the Keyboard input.kzprojKanzi Studio project file stored in <KanziWorkspace>/Tutorials/Keyboard input/Start directory.
The <KanziWorkspace>/Tutorials/Keyboard input/Completed directory contains the completed project of this tutorial.
The starting point project contains the content you need to complete this tutorial:
The Toggle Button Group 2D node NavigationButtons contains the toggle buttons at the bottom of the application user interface, which users use to navigate between the Home, Media, Car, and Navigation application screens.
The Library > Resource Files > Scripts contains a script called ButtonState.js which sets the appearance of each navigation button when that button has focus.
The Home node shows the content on the Home application screen.
The Recent and Favorite nodes show the recent and favorite addresses on the Home application screen.
The HomeControls node positions the buttons users use to navigate between the Recent, Favorite, and AirCondition on the Home application screen.
The AirCondition node shows the content on the AirCondition application screen. The Driver and Passenger nodes contain the sliders you use to set the air conditioning temperature on the AirCondition screen.
The Media node shows the Media application screen.
The Car node contains a Grid List Box 2D node which shows the car settings on the Car application screen.
The Navigation node shows the content on the Navigation application screen.
The Grid Layout 2D node positions:
The Navigation Grid List Box node which contains the address entries on the Navigation application screen.
The OpenMap node which users use to navigate to the Map application screen.
The Map node shows the Map application screen.
The Scroll View 2D node enables scrolling for the map on the Map application screen.
The CloseMap node closes the Map application screen and navigates back to the Navigation application screen.
The resource dictionary of the Screen node contains aliases for nodes in the project. Aliases provide a convenient way to set nodes in a focus chain and access them from JavaScript scripts in the application. You can find the content of resource dictionaries in the Dictionaries window. To learn more about aliases and how to use them, see Using aliases.
Create keyboard navigation between application screens
In this section you create keyboard navigation for the toggle buttons you use to navigate between the Page nodes which show the application screens.
To create keyboard navigation between application screens:
In the Project select the Screen node, in the Node Components > Triggers section right-click, and select Add Trigger > General > On Attached. When you start the application, Kanzi by default sets the focus to the Screen node. You use the On Attached trigger to set focus to the navigation bar when you start the application.
In the Node Components add to the On Attached trigger a Set Focus action and in the Set Focus window set the Target Item to #NavigationButtons. You set focus to the Toggle Button Group 2D node NavigationButtons when the application starts to allow the user to move the focus in the focus chain. In the next step of this section you set the NavigationButtons node to forward the focus to the HomeButton node to create the navigation between the application screens.
TIP
You can define a focus chain using an alias or the path to each node. Aliases provide a convenient way to set the nodes in a focus chain. See Using aliases.
In the Project > RootPage select the NavigationButtons node, in the Properties right-click, select Add Property > Focus Manager > Focus Scope property, and enable that property. You use the Focus Scope property to forward the focus from the NavigationButtons node to the HomeButton node to allow navigation between the application screens. This way the user can use keyboard keys to navigate between those toggle buttons.
In the Project > RootPage > NavigationButtons > Grid Layout 2D select the HomeButton node, in the Properties right-click, select Add Property > Node > Logical Focus property, and enable that property. When you set focus to the focus scope node, the child node for which you enable the Logical Focus property receives focus. If the focus scope has several child nodes with the Logical Focus property enabled, the focus manager sets focus to the last child node. You set the HomeButton node to receive focus when you set focus to the Toggle Button Group 2D node NavigationButtons.
In the Project > RootPage > NavigationButtons > Grid Layout 2D select the HomeButton node, in the Properties right-click, select Add Property > Focus Manager > Right Navigation Node, and set it to #MediaButton. The focus chain in Kanzi enables you to navigate between nodes based on their rendered position using the ← (Left Arrow), → (Right Arrow), ↑ (Up Arrow), and ↓ (Down Arrow) keys. You use the Right Navigation Node property to set focus from the HomeButton node to the MediaButton node when the user presses the → (Right Arrow) key on the keyboard.
Repeat the previous step for the MediaButton and CarButton nodes but in the Properties set the Right Navigation Node property:
For the MediaButton node to #CarButton.
For the CarButton node to #NavigationButton.
In the Project > RootPage > NavigationButtons > Grid Layout 2D select the MediaButton node, in the Properties right-click, select Add Property > Focus Manager > Left Navigation Node property, and set it to #HomeButton. You use the Left Navigation Node property to set focus from the MediaButton node to the HomeButton node when the user presses the ← (Left Arrow) key on the keyboard.
Repeat the previous step for the CarButton and NavigationButton nodes but in the Properties set the Left Navigation Node property:
For the CarButton node to #MediaButton.
For the NavigationButton node to #CarButton.
Restart the Preview to set the initial focus to the HomeButton toggle button. You can now use the → (Right Arrow) and ← (Left Arrow) keyboard keys to navigate between application screens.
